
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Configuration</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #example-out .entry {
        font-family:courier;
        margin-top:2px;
    }

    #example-out .header {
        font-weight:bold;
        font-family:arial;
        color:#8dd5e7;
        margin-top:10px;
        margin-bottom:3px;
    }

    #example-out {
        overflow:auto;
        border:1px solid #000;
        color:#ffffff;
        background-color:#004C6D;
        margin:5px;
        height:20em;
        width:30em;
        padding:2px;
    }

</style>
<script type="text/javascript">
    YUI.namespace("example");
    YUI.example.print = function(msg, cl) {
        var o = document.getElementById("example-out");
        if (o) {
            cl = cl || "";
            o.innerHTML += '<div class="entry ' + cl + '">' + msg + '</div>';
        }
    }
</script>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Basic Configuration</h1>

<div class="exampleIntro">
	<p>This example provides an introduction to the Attribute utility, showing how you can use it to add attribute support to your own custom classes.</p>

<p>It is geared towards users who want to create their own classes from scratch and add Attribute support. 
In most cases you should consider extending the <a href="../../Base.html"><code>Base</code></a> class when you need managed attribute support, 
instead of creating your own class from scratch. 

<a href="../../Base.html"><code>Base</code></a> does the work described in this example for you, in addition to making it easier for users to extend you class.
</p>


			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="example-out"></div>

<script type="text/javascript">

// Get a new instance of YUI and 
// load it with the required set of modules

YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) {

    // Setup custom class which we want to 
    // add managed attribute support to

    function MyClass(cfg) {
        // When constructed, setup the initial attributes for the
        // instance, by calling the addAttrs method.

        // Note that the addAttrs method doesn't protect the 
        // configuration objects passed in as mentioned in 
        // the API docs, so we use Y.merge to create a shallow 
        // clone to pass in to addAttrs.
        this.addAttrs(Y.merge(MyClass.ATTRIBUTES), cfg);
    }

    // Setup static property to hold attribute config
    MyClass.ATTRIBUTES = {
        // Add 3 attributes, foo, bar and foobar
        "foo" : {
            value:5
        },
 
        "bar" : {
            value:"Hello World!"
        },

        "foobar" : {
            value:true
        }
    };

    // Augment custom class with Attribute
    Y.augment(MyClass, Y.Attribute);

    var o1 = new MyClass();

    var print = YUI.example.print;

    print("o1 values set during construction:", "header");
    print("foo:" + o1.get("foo"));
    print("bar:" + o1.get("bar"));
    print("foobar:" + o1.get("foobar"));

    o1.set("foo", 10);
    o1.set("bar", "Hello New World!");
    o1.set("foobar", false);

    print("o1 new values:", "header");
    print("new foo:" + o1.get("foo"));
    print("new bar:" + o1.get("bar"));
    print("new foobar:" + o1.get("foobar"));

    var o2 = new MyClass({
        foo: 7,
        bar: "Aloha World!",
        foobar: false
    });

    print("o2 values set during construction:", "header");

    print("foo:" + o2.get("foo"));
    print("bar:" + o2.get("bar"));
    print("foobar:" + o2.get("foobar"));
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
